<template>
  <div>
      <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="float: left; display: inline; margin-top: 12px"
            >
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/check-log' }">点检记录</el-breadcrumb-item>
              <el-breadcrumb-item>点检记录详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-table :data="tableCell" style="width: 100%" center>
            <!-- <el-table-column label="时间">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="类别">
              <template slot-scope="scope">
                <p>{{ scope.row.deviceName }}</p>
              </template>
            </el-table-column>
            <el-table-column label="区域">
              <template slot-scope="scope">
                <p>{{ scope.row.checkName }}</p>
              </template>
            </el-table-column>
            
            <el-table-column label="点检内容">
              <template slot-scope="scope">
                <p>{{ scope.row.content }}</p>
              </template>
            </el-table-column>
            <el-table-column label="点检状况">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" v-if="scope.row.checkState === '2' " plain>异常</el-button>
                <el-button size="mini" type="primary" v-if="scope.row.checkState === '1' " plain>正常</el-button>
              </template>
            </el-table-column>
            <el-table-column label="点检情况">
              <template slot-scope="scope">
                <p>{{ scope.row.message }}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
  </div>
</template>
<script>
import { getDeviceCheckContentDetail } from '../../api/check'
export default {
  name: "checkLogDetail",
  components: {},
  props: {},
  data() {
    return {
       tableCell: [],
    };
  },
  computed: {},
  watch: {},
  created() {
      this.getCheckLogDetail();
  },
  mounted() {},
  methods: {
      getCheckLogDetail(){
          const contentId = this.$route.params.contentID
          getDeviceCheckContentDetail(contentId).then(res => {
              console.log(res);
              this.tableCell = res.data;
          })
      }
  },
};
</script>
<style scoped lang="less">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>